<template>
<div class="Order">

    <div class="list">
        <span @click="currentIndex=index;mysort(index)" :class="{active:currentIndex==index}" v-for="(item,index) in arr" :key="index">{{item}}</span>
    </div>
     <div class="goods" v-for="(item,index) in arr1" :key="index">
        <div class="imgsmall" >
             <img src="../../assets/1.img.jpg" alt="">
              <div>
                <span class="text1">{{item.text}}</span>
              </div>
            
        </div>
        <div class="imgbig">
                 <div>
                   <img src="../../assets/bbt02.jpg" alt="">
                 </div>
                 <div>
                    <img src="../../assets/bbt03.jpg" alt="">
                 </div>
                 <div class="p1">
                  <span >￥{{item.price}}</span>
               </div>
        </div>
     </div>
 </div>
</template>

<script>
// import { NavBar } from 'vant';

// Vue.use(NavBar);
export default {
   data(){
    return{
        currentIndex:0,
        arr:['全部','待消费','待评价','退款'],
        arr1:[
            {pic:'../../assets/bbt01.jpg',text:"纯手工饺子(凤城九路店)",pic1:'../../assets/bbt02.jpg',
            pic2:'../../assets/bbt03.jpg',price:17.8},
             {pic:'../../assets/bbt01.jpg',text:"纯手工饺子(凤城九路店)",pic1:'../../assets/bbt02.jpg',
            pic2:'../../assets/bbt03.jpg',price:58.8},
             {pic:'../../assets/bbt01.jpg',text:"纯手工饺子(凤城九路店)",pic1:'../../assets/bbt02.jpg',
            pic2:'../../assets/bbt03.jpg',price:36.8}

        ]
    }
   },
   methods:{
    handleClick(){
        this.currentIndex=index;
    },
    mysort(index){
        if(index==0){
            this.arr1.sort((a,b)=>{
             return a.price-b.price;
            })
        }else if(index==1){
            this.arr1.sort((a,b)=>{
             return b.price-a.price;
            })
        }else if(index==2){
            this.arr1.sort((a,b)=>{
             return a.price-b.price;
            })
        }else if(index==3){
            this.arr1.sort((a,b)=>{
             return b.price-a.price;
            })
        }

    }
   }
}
</script>

<style lang="scss" scoped>
.list{
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
}
.list span{
   display: inline-block;
   width: 100px;
   text-align: center;
}
.text1 {
    display: inline-block;
    margin-left: 10px;
    text-align: center;
    margin-top: 5px;
}
.imgsmall {
    // width: 30px;
    height: 30px;
    display: flex;
    margin-top: 30px;
    margin-left: 10px;
}
.imgsmall img{
 width: 30px;
//   width: 100%; 
}
.imgbig {
    display: flex;
width: 80px;
height: 80px;
    margin-left: 10px;

}
.imgbig img{
width: 80px;
height: 80px;
margin-top: 15px;
}
.imgbig .p1 span{
    display: inline-block;
    margin-top: 20px;
    margin-left: 120px;
    display: fixed;
    right: 0;
    padding-top: 20px;
}
.active{
    background: orange;
    color: red;
}
</style>